<script setup>
import {onMounted,  ref } from 'vue'
import axios from "axios";
let psychologyKnowledgeList = ref([]);
const multipleSelection = ref([]);
//分页数据
const size = ref("default");
let pageNum = ref(1);
let pageSize = ref(5);
let total = ref(0);
let title = ref('');
let name = ref('');
//表格数据
//封装axios
const findPsychologyKnowledgePage=() => {
  axios.get(
      '/api/psychologyKnowledge/searchByName',
      {
        params: {
          pageNum: pageNum.value,
          pageSize: pageSize.value,
          title: title.value
        }
      }
  ).then(resp=>{
    console.log(resp)
    const pageInfo = resp.data.data;
    psychologyKnowledgeList.value = pageInfo.list;
    total.value = pageInfo.total;
    pageSize.value = pageInfo.pageSize;
    pageNum.value = pageInfo.pageNum;
  })
}
//生命周期函数
onMounted(() => {
  findPsychologyKnowledgePage();
})
const handleSizeChange = () => {
  // console.log("搜索条件：");
  // pageSize.value = val;
  // console.log(title.value);
  findPsychologyKnowledgePage();
};
const handleCurrentChange = () => {
  // console.log(pageNum.value);
  findPsychologyKnowledgePage();
};
const handleSelectionChange = (val) => {
  const newval = val.map((item) => item.id);
  multipleSelection.value = newval;
  findPsychologyKnowledgePage();
};

//搜索
const suoshou = () => {
  findPsychologyKnowledgePage();
}
//删除
const deleteInfo = (id) => {
  axios
      .delete("/api/psychologyKnowledge/deletePsychologyKnowledge/" + id)
      .then((resp) => {
        console.log(resp);
        findPsychologyKnowledgePage();
      });
};
const flag = ref(false);
const fromdata=ref({});
let editEnable=ref(false);
const tijiao =async () => {
  flag.value = false;
  console.log(fromdata.value);
  if (name.value == '编辑') {
    const result = await axios.put("/api/psychologyKnowledge/updatePsychologyKnowledge", fromdata.value)
    if (result.data.code === 200) {
      findPsychologyKnowledgePage();
    }
  }
    if(name.value == '新增'){
      const result = await axios.post("/api/psychologyKnowledge/addPsychologyKnowledge", fromdata.value)
      console.log(fromdata.value)
      if (result.data.code === 200) {
        findPsychologyKnowledgePage();
      }
  }
}
const xinzeng = (info) =>{
  flag.value = true;
  fromdata.value={};
  editEnable.value = false;
  name.value ='新增'
}
const bianji = (info) => {
  flag.value = true;
  // 创建一个新对象，复制原对象的属性
  fromdata.value = { ...info };
  editEnable.value = false;
  name.value ='编辑'
}

//图片上传
const beforeAvatarUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    ElMessage.error('只能上传 JPG/PNG 格式的图片！');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！');
  }
  return isJpgOrPng && isLt2M;
};

const handleAvatarSuccess = (response, file) => {
  if (response) {
    fromdata.value.img = response;
    ElMessage.success('图片上传成功！');
  } else {
    ElMessage.error('图片上传失败！');
  }
};
const getImgUrl = (img) => {
  console.log(img)
  console.log("http://localhost:8080"+img)
  return "http://localhost:8080"+img;
}
</script>

<template>
心理知识名称
  <el-input  style="width: 240px;margin: 0 10px" v-model="title"/>
  <el-button size="large" type="primary" @click="suoshou">搜索</el-button>
  <el-button size="large" type="primary" @click="xinzeng">新增心理知识</el-button>
  <div>
    <el-table
        :data="psychologyKnowledgeList"
        style="width: 100%"
        row-key="id"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="ID" width="120" prop="id">

      </el-table-column>
      <el-table-column  label="标题" width="120" prop="title"/>
      <el-table-column  label="简介"  prop="introduction"/>
      <el-table-column  label="列表图" prop="img">
      <template #default="scope">
        <img :src="getImgUrl(scope.row.img)" alt="图片" width="80">
      </template>
      </el-table-column>
      <el-table-column  label="详细内容" prop="text"/>
      <el-table-column  label="创建时间" prop="time"/>
      <el-table-column  label="操作">
      <template #default="scope">
        <div style="display: flex">
          <el-button type="primary" style="margin: 0 20px; font-size: 15px;"size="large"  @click="bianji(scope.row)">编辑</el-button>
          <el-button type="primary" style="margin: 0 20px; font-size: 15px;"size="large"  @click="deleteInfo(scope.row.id)">删除</el-button>
        </div>
      </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 30, 40]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
<!--  弹出层-->
  <div>
    <el-dialog v-model="flag" title="新增心理知识" width="700px" center>
      <el-form :model="fromdata" label-width="auto" style="max-width: 300px" :readonly="editEnable">

        <el-form-item label="标题">
          <el-input v-model="fromdata.title" />
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="fromdata.introduction" />
        </el-form-item>
        <el-form-item label="列表图">
            <el-upload
                action="/api/upload"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                @success="handleAvatarSuccess"
            >
              <template #trigger>
                <img :src="getImgUrl(fromdata.img)" alt="picture" style="width: 100px">
              </template>
            </el-upload>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="fromdata.text" type="textarea" />
        </el-form-item>
      </el-form>
    <span>

    </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">退出</el-button>
          <el-button type="primary" @click="tijiao">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>


</template>

<style scoped>

</style>
